<template>
    <div class="list">
        <div class="top">
            <a-page-header title="返回" @back="$router.go(-1)" />
            <div class="head">
                <a-form-model :form="form" layout="inline">
                    <a-form-model-item>
                        <a-input
                            v-model="form.name"
                            placeholder="搜索书名、作者"
                            v-focus
                        ></a-input>
                    </a-form-model-item>
                    <a-form-model-item>
                        <a-button @click.prevent="search">搜索</a-button>
                    </a-form-model-item>
                </a-form-model>
            </div>
        </div>
        <div class="contain">
            <div v-if="books === 'searching'">
                <div class="box">
                    <div class="loader-02"></div>
                </div>
            </div>
            <div v-else-if="books === 'noResult'">
                <p>没有搜到你想要的东西~~</p>
            </div>
            <div v-else-if="Array.isArray(books)">
                <a-list :data-source="books">
                    <a-list-item slot="renderItem" slot-scope="item">
                        <div class="book" @click="goBookInfo(item.url)">
                            <div class="pic">
                                <img :src="'https://www.81book.com'+item.picUrl" alt />
                            </div>
                            <div class="txt">
                                <span class="title">{{ item.bookName }}</span>
                                <span class="author"
                                    >作者：{{ item.author }}</span
                                >
                                <span class="category"
                                    >类型：{{ item.category }}</span
                                >
                                <span class="lastChapter"
                                    >最新章节：{{ item.lastChapterName }}</span
                                >
                            </div>
                        </div>
                    </a-list-item>
                </a-list>
            </div>
        </div>
    </div>
</template>

<script>
// import { reject } from "q";
import { Button, FormModel, Input, List, PageHeader } from "ant-design-vue";
import { getSearch } from "@/api/index.js";

export default {
    data: () => {
        return {
            books: "",
            keyword: "",
            form: {
                name: "",
            },
        };
    },
    components: {
        "a-button": Button,
        "a-form-model": FormModel,
        "a-form-model-item": FormModel.Item,
        "a-input": Input,
        "a-list": List,
        "a-list-item": List.Item,
        "a-page-header": PageHeader,
    },

    directives: {
        focus: {
            // 指令的定义
            inserted: function (el) {
                el.focus();
            },
        },
    },
    methods: {
        // 搜索
        async searchBook() {
            this.books = "";
            const res = await getSearch({
                keyword: this.keyword,
            });
            this.books = res.data;
        },

        // 跳转
        goBookInfo(url) {
            // 这里的参数是个url,里面有斜杠，所以要先用encodeURIComponent（）编码一下
            var bookUrl = encodeURIComponent('https://www.81book.com'+url);
            this.$router.push({ path: "/bookinfo/" + bookUrl });
        },

        // 搜索
        async search() {
            // console.log(this.form.name)
            if (!this.form.name) {
                this.books = [];
                return;
            }
            this.books = "searching";
            const res = await getSearch({
                keyword: this.form.name,
            });
            this.books = res.data;
        },
    },
};
</script>

<style scoped lang='less'>
.top {
    width: 100%;
    position: fixed;
    top: 0;
    background: white;
    z-index: 1;
}
.contain {
    margin-top: 110px;
}
.head {
    width: 100%;
    display: flex;
    height: 10%;
    overflow: hidden;
    justify-content: center;
}
.head form {
    /* text-align: center; */
    width: 70%;
    display: flex;
    overflow: hidden;
}
.search {
    width: 16rem;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.search img {
    width: 30px;
    height: 30px;
}
.box {
    width: 5rem;
    height: 5rem;
    margin: 5rem auto;
}

.book {
    display: flex;
    flex-direction: row;
    margin: 0 auto;
    margin-top: 8px;
    // border-bottom: 1px solid lightgray;
    width: 95%;
    height: 120px;
    .pic {
        width: 80px;
        height: 120px;
        background: url(../assets/cover.jpg);
        background-size: 100% 100%;
        img {
            width: 100%;
            height: 100%;
        }
    }
    .txt {
        display: flex;
        flex-direction: column;
        margin-left: 10px;
        width: 70%;
        span {
            line-height: 1.2;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 12px;
            font-weight: 400;
            margin-top: 5px;
        }
        .title {
            margin-top: 20px;
            font-size: 16px;
            color: black;
        }
    }
}

.loader-02 {
    margin-top: 200px;
    border: 0.2em solid transparent;
    border-left-color: currentcolor;
    border-right-color: currentcolor;
    border-radius: 50%;
    -webkit-animation: 1s loader-02 linear infinite;
    animation: 1s loader-02 linear infinite;
}

@-webkit-keyframes loader-02 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes loader-02 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
</style>

